<template>
  <div class="example">
    <div class="w-flex">
      <div class="example__render grow" :class="contentClass">
        <slot></slot>
      </div>
      <div class="buttons">
        <w-tooltip left>
          <template #activator="{ on }">
            <w-button v-on="on" @click="showCode" lg icon="mdi mdi-code-tags" text color="primary">
            </w-button>
          </template>
          View the source code
        </w-tooltip>
        <w-tooltip left>
          <template #activator="{ on }">
            <w-button v-on="on" @click="createCodepen" lg icon="mdi mdi-codepen" text color="primary"></w-button>
          </template>Edit in Codepen
        </w-tooltip>
      </div>
    </div>
    <w-transition-expand y>
      <div class="example__source" v-show="showSource">
        <div class="wrapper">
          <div class="html" v-if="canCopy">
            <slot name="html"></slot>
            <w-button v-if="canCopy" @click="copy($slots.html()[0].el)" color="black" text
              icon="mdi mdi-content-copy">
            </w-button>
            <w-notification class="mr5 mt-1" v-model="showCopied" transition="slide-fade-left" plain absolute sm success
              timeout="1000">
              code copied to clipboard</w-notification>
          </div>
          <div class="js" v-if="canCopy1">
            <slot name="js"></slot>
            <w-button v-if="canCopy1" @click="copy($slots.js()[0].el)" color="black" text
              icon="mdi mdi-content-copy">
            </w-button>
            <w-notification class="mr5 mt-1" v-model="showCopied1" transition="slide-fade-left" plain absolute sm
              success timeout="1000">
              code copied to clipboard</w-notification>
          </div>
          <div class="css" v-if="canCopy2">
            <slot name="css"></slot>
            <w-button v-if="canCopy2" @click="copy($slots.css()[0].el)" color="black" text
              icon="mdi mdi-content-copy">
            </w-button>
            <w-notification class="mr5 mt-1" v-model="showCopied2" transition="slide-fade-left" plain absolute sm
              success timeout="1000">
              code copied to clipboard</w-notification>
          </div>
        </div>
      </div>
    </w-transition-expand>
  </div>
</template>

<script>
  import { ref, computed } from "vue";
  export default {
    props: {
      contentClass: { type: String },
      externalJs: { type: String },
      externalCss: { type: String },
      fullJs: { type: Boolean },
      reactive: { type: Boolean },
    },

    setup(props, ctx) {
      const showSource = ref(false);
      const showCopied = ref(false);
      const showCopied1 = ref(false);
      const showCopied2 = ref(false);

      const canCopy = ref(false);
      const canCopy1 = ref(false);
      const canCopy2 = ref(false);


      // copy1,copy2,copy3
      async function copy(content) {
        if (!content) {
          return;
        } else {
          showCopied.value = false;
        }
        try {
          await navigator.clipboard.writeText(content);
          showCopied.value = true;
        } catch (error) {
          showCopied.value = false;
        }
      }
      async function copy1(content) {
        if (!content) {
          return;
        } else {
          showCopied1.value = false;
        }
        try {
          await navigator.clipboard.writeText(content);
          showCopied1.value = true;
        } catch (error) {
          showCopied1.value = false;
        }
      }
      async function copy2(content) {
        if (!content) {
          return;
        } else {
          showCopied2.value = false;
        }
        try {
          await navigator.clipboard.writeText(content);
          showCopied2.value = true;
        } catch (error) {
          showCopied2.value = false;
        }
      }
      function showCode() {
        if (!!ctx.slots.html) {
          canCopy.value = !!navigator.clipboard;
        }
        if (!!ctx.slots.js) {
          canCopy1.value = !!navigator.clipboard;
        }
        if (!!ctx.slots.css) {
          canCopy2.value = !!navigator.clipboard;
        }
        showSource.value = !showSource.value;
      }
      function createCodepen(e) {
        const openEditors = [
          (!!slots.html || !!slots.pug) * 1,
          (!!slots.css || !!slots.scss) * 1,
          !!slots.js * 1,
        ];

        const cssDeps = [
          "https://unpkg.com/wave-ui@next/dist/wave-ui.css",
          "https://cdn.materialdesignicons.com/5.1.45/css/materialdesignicons.min.css",
        ];
        if (props.externalCss) cssDeps.push(props.externalCss);

        const jsDeps = [
          "https://unpkg.com/vue@3",
          "https://unpkg.com/wave-ui@next/dist/wave-ui.umd.min.js",
        ];
        if (props.externalJs) jsDeps.push(props.externalJs);

        const { html: htmlSlot, pug, js: jsSlot, css: cssSlot, scss } = slots;
        const slots = {
          html: (htmlSlot && htmlSlot()[0].children) || "",
          pug: (pug && pug()[0].children) || "",
          js: (jsSlot && jsSlot()[0].children) || "",
          css: (cssSlot && cssSlot()[0].children) || "",
          scss: (scss && scss()[0].children) || "",
        };
        let html = "";

        if (slots.pug) {
          html =
            "#app\n" +
            "  w-app(block)\n" +
            "    " +
            slots.pug.replace(/\n$/, "").replace(/\n/g, "\n    ");
        } else {
          html =
            '<div id="app">\n' +
            '  <w-app id="app" block>\n' +
            "    " +
            slots.html.replace(/\n$/, "").replace(/\n/g, "\n    ") +
            "\n  </w-app>\n" +
            "</div>\n";
        }
        const css =
          ".w-app {font: 14px sans-serif;padding: 24px;}\n\n" +
          (slots.css || slots.scss);
        const js = props.fullJs
          ? slots.js
          : "const app = Vue.createApp({\n" +
          "  " +
          slots.js.replace(/\n$/, "").replace(/\n/g, "\n  ") +
          "\n" +
          "})\n\n" +
          "new WaveUI(app, {})\n\n" +
          "app.mount('#app')";

        const data = {
          title: "Wave UI Example Pen",
          editors: openEditors.join(""),
          layout: "top",
          html,
          html_pre_processor: slots.pug ? "pug" : "none",
          css,
          css_pre_processor: "scss",
          css_starter: "normalize",
          css_prefix: "autoprefixer",
          js,
          js_pre_processor: "babel",
          css_external: cssDeps.join(";"),
          js_external: jsDeps.join(";"),
        };
        const JSONstring = JSON.stringify(data)
          .replace(/"/g, "&quot;")
          .replace(/'/g, "&apos;");

        e.target.insertAdjacentHTML(
          "afterend",
          `<form class="codepen-form" action="https://codepen.io/pen/define" method="POST" target="_blank">
              <input type="hidden" name="data" value="${JSONstring}">
            </form>`
        );

        const form = document.querySelector(".codepen-form");
        form.submit();
        form.parentNode.removeChild(form); // el.remove() doesn't work on IE11.
      }


      return {
        showSource,
        showCopied,
        showCopied1,
        showCopied2,
        canCopy,
        canCopy1,
        canCopy2,
        // methods
        copy,
        copy1,
        copy2,
        showCode,
        createCodepen,
        // copied,
      };
    },
  };
</script>

<style lang="scss">
  .example {
    position: relative;
    margin-top: 1em;
    margin-bottom: 1em;
    border: 1px solid #eee;
    background-color: #fcfcfc;
    border-radius: 3px;

    .buttons {
      border-left: 1px solid #eee;
      display: flex;
      flex-direction: column;
      padding: 4px;
      background: aquamarine;

      .w-button {
        width: 30px;
        height: 30px;
      }
    }

    &__render {
      padding: 12px;
      overflow: auto;
    }

    &__source {
      position: relative;
      height: fit-content;
      background-color: aquamarine;
      margin: 0 !important;
      border: solid rgba(0, 0, 0, 0.1);
      border-width: 1px 0 0;
      border-radius: 0;
      line-height: 1.3;
      padding: 0;

      .wrapper {
        display: flex;
        flex-direction: column;

        .html {
          margin: 0.4rem;
          padding: 1.5rem;
          position: relative;
          background: white;

          .w-button {
            position: absolute;
            top: 1px;
            right: 1px;

            &:hover .w-icon {
              background-color: rgba(35, 71, 129, 0.15);
            }

            &:active .w-icon {
              background-color: rgba(35, 71, 129, 0.25);
            }
          }
        }

        .js {
          padding: 1.5rem;
          margin: 0.4rem;
          position: relative;
          background: white;

          .w-button {
            position: absolute;
            top: 1px;
            right: 1px;
            /* display:none; */

            &:hover .w-icon {
              background-color: rgba(35, 71, 129, 0.15);
            }

            &:active .w-icon {
              background-color: rgba(35, 71, 129, 0.25);
            }
          }
        }

        .css {
          padding: 1.5rem;
          margin: 0.4rem;
          position: relative;
          background: white;

          .w-button {
            position: absolute;
            top: 1px;
            right: 1px;

            &:hover .w-icon {
              background-color: rgba(35, 71, 129, 0.15);
            }

            &:active .w-icon {
              background-color: rgba(35, 71, 129, 0.25);
            }
          }
        }
      }

    }

    &__source .w-alert {
      padding: 2px 4px;
      font-size: 13px !important;
      border-top: 1px solid #ddd;

      &:after {
        background-color: #b0dcff;
      }
    }

    .codepen-form {
      position: absolute;
      z-index: -100;
      opacity: 0;
    }
  }
</style>